<template>
	<view class="page-out">
		<uni-nav-bar left-icon="left" rightText="完成" title="购物车" fixed="true" status-bar="true" @clickLeft="clickLeft"
			@clickRight="clickRight" />
		<view class="primary-color">
			基本信息
		</view>
		<view class="out">
			<UniCard>
				<view class="item-out">
					<text>头像</text>
					<view>
						<uni-file-picker :del-icon="false" disable-preview :imageStyles="imageStyles" :limit="1"
							v-model="imageValue" fileMediatype="image" @select="select" @fail="fail" />
					</view>
					<text class="iconfont icon-youjiantou"></text>
				</view>
				<view class="item-out">
					<text>手机号</text>
					<text>{{this.userInfo.phone}}</text>
					<text></text>
				</view>
				<view class="item-out" @click="name()">
					<text>姓名</text>
					<text>{{this.username}}</text>
					<text class="iconfont icon-youjiantou"></text>
				</view>
				<view class="item-out" @click="clickSex">
					<text>性别</text>
					<text>{{this.sex}}</text>
					<text class="iconfont icon-youjiantou"></text>
				</view>
				<view class="item-out">
					<text>生日</text>
					<!-- 请选择生日 -->
					<view class=""><uni-datetime-picker type="date" :clear-icon="false"
							v-model="date">{{getDate}}</uni-datetime-picker></view>
					<text class="iconfont icon-youjiantou"></text>
				</view>
				<view class="item-out">
					<text>地区</text>
					<text @click="showCityPicker">{{pathCity}}</text>
					<text class="iconfont icon-youjiantou" @click="showCityPicker"></text>
				</view>
			</UniCard>
		</view>
		<view class="primary-color">
			通用设置
		</view>
		<UniCard>
			<view class="item-out">
				<text style="color: black;">收货地址</text>
				<text></text>
				<text class="iconfont icon-youjiantou" style="color: black;" @click="toDelivery"></text>
			</view>
			<view class="login-out" @click="outLogin">
				退出登录
			</view>
		</UniCard>
		<!-- 修改姓名 -->
		<uni-popup ref="nameDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="修改姓名" :value="this.userInfo.userName" placeholder="请输入姓名"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
		<!-- 选择性别-->
		<uni-popup ref="sexPopup" background-color="#fff" :mask-click="false">
			<view class="popup-content">
				<button @click="getMale('男')" value='男'>男</button>
				<button @click="getFemale('女')" value='女'>女</button>
			</view>
			<button @click="closeSex" class="cancel">取消</button>
		</uni-popup>
		<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" />
	</view>
</template>
<script>
	import LineBorder from '@/components/common/LineBorder.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue';
	import UniCard from '@/components/common/UniCard.vue';
	import http from '@/common/api/reqeust.js';

	export default {
		data() {
			return {
				imageValue: {},
				imageStyles: {
					width: 40,
					height: 40,
					border: {
						radius: '50%'
					}
				},
				sex: '',
				username: '',
				date: "",
				pickerValueDefault: [0, 0, 1],
				addressObj: {
					province: '',
					city: '',
					district: ''
				}
			}
		},
		components: {
			LineBorder,
			mpvueCityPicker,
			UniCard
		},
		methods: {
			...mapMutations(['loginOut']),
			// 获取上传状态
			select(e) {
				this.imageValue.url = e.tempFilePaths.join('')
			},
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			// 更新个人信息
			updateUser() {
				let params = {
					date: this.date,
					sex: this.sex,
					name: this.username,
					region: JSON.stringify(this.addressObj),
					imgUrl: this.imageValue.url
				}
				http.request({
					url: '/user/updateUser',
					method: 'post',
					data: {
						phone: this.userInfo.phone,
						...params
					}
				}).then(res => {
					if (res.success) {
						uni.showToast({
							title: res.msg
						})
					}
				}).catch((err) => {
					uni.showToast({
						title: '请求失败',
						icon: 'error'
					})
				})
			},
			// 退出登录
			outLogin() {
				uni.showToast({
					title: '退出登录成功'
				})
				this.loginOut()
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			// 点击姓名行,打开姓名修改对话框
			name() {
				this.$refs.nameDialog.open()
			},
			// 姓名确认框
			dialogInputConfirm(val) {
				uni.showLoading({
					title: '修改中...'
				})

				setTimeout(() => {
					uni.hideLoading()
					console.log(val)
					this.value = val
					this.username = val
					// 关闭窗口后，恢复默认内容
					this.$refs.nameDialog.close()
				}, 1000)
			},
			clickSex() {
				this.$refs.sexPopup.open('bottom')
			},
			closeSex() {
				this.$refs.sexPopup.close()
			},
			getMale(v) {
				this.sex = v
				this.closeSex()
			},
			getFemale(v) {
				this.sex = v
				this.closeSex()
			},
			// 去收货地址页
			toDelivery() {
				uni.navigateTo({
					url: '/pages/deliveryAddress/deliveryAddress'
				})
			},
			// 城市选择器打开
			showCityPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			// 选择城市 确定后
			onConfirm(e) {
				let arr = e.label.split('-')
				this.addressObj.province = arr[0]
				this.addressObj.city = arr[1]
				this.addressObj.district = arr[2]
			},
			// 点击导航栏左侧<
			clickLeft() {
				uni.reLaunch({
					url: '/pages/my/my'
				})
			},
			// 点击导航栏右侧 "完成"
			clickRight() {
				this.updateUser()
			}
		},
		onLoad() {
			let region = this.userInfo.region?.split(',')
			let dates = new Date(this.userInfo.birth_date)
			this.username = this.userInfo.userName
			this.sex = this.userInfo.sex
			this.addressObj.province = region[0]
			this.addressObj.city = region[1]
			this.addressObj.district = region[2]
			this.date = dates.getFullYear() + "-" + (dates.getMonth() + 1) + "-" + dates.getDate();
			this.imageValue.url = this.userInfo.imgUrl
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				addressList: state => state.address.list
			}),
			// 选择城市面板
			pathCity() {
				if (this.addressObj.province) {
					return `${this.addressObj.province}-${this.addressObj.city}-${this.addressObj.district}`
				} else {
					return '请选择'
				}
			},
			// 选择生日面板
			getDate() {
				if (this.date) {
					return `${this.date}`
				} else {
					return '请选择'
				}
			},
			getSex() {
				if (this.sex) {
					return `${this.sex}`
				} else {
					return '请选择'
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	/deep/uni-button:after {
		border: none;
	}

	/deep/.uni-input {
		padding: 0;
		font-size: $uni-font-size-base;
	}

	/deep/.uni-picker-action-confirm {
		color: #1aad19;
	}

	/deep/.uni-datetime-picker--btn[data-v-94becebc] {
		background-color: #1aad19;
		font-size: 14px;
	}

	@mixin flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.page-out {

		.primary-color {
			padding: 0 20rpx;
		}

		.primary-color {
			padding: 10rpx 20rpx;
			font-weight: 700;
		}

		.out {

			.item-out {
				@include flex padding: 10rpx 0;

				&:not(:last-child) {
					border-bottom: solid 1px #f1f1f1;
				}

				text:nth-of-type(1),
				text:nth-of-type(3) {
					color: $txt-color;
				}

				.img {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.popup-content {
			background-color: #fff;
			margin-bottom: 10rpx;
		}

		.cancel {
			color: $txt-color;
		}
	}
</style>